<template>
  <div class="stat-item" :class="item.color || randomColor()">
    <div class="icon"><img :src="item.icon" /></div>
    <div class="info">
      <div class="title">{{ item.title }}</div>
      <div class="value">{{ formtNum(item.value) }}</div>
    </div>
  </div>
</template>

<script setup>
import { formtNum } from '@/mixin';
// icon : /icons/event.svg
// title: 总数
// value: 123
const colors = ['blue', 'red', 'green', 'yellow']

const props = defineProps(['item'])

const randomColor = () => {
  return colors[Math.ceil(colors.length * Math.random())]
}
</script>

<style lang="less" scoped>
@import url('@/assets/common.less');

.stat-item {
  .flex1();
  .flex-row();
  gap: 14px;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .1);

  color: #fff;
  background: linear-gradient(45deg, #eee, #aaa);
  padding: 20px 10px;

  .info {
    .flex-col();
    gap: 8px;

    .value {
      font-size: 2em;
    }

    .title {
      opacity: .7;
    }
  }

  .icon {
    opacity: .5;

    img {
      width: 54px;
    }
  }

  &.blue {
    background: linear-gradient(45deg, #5274e6, #5a6aff);
  }

  &.red {
    background: linear-gradient(45deg, #e44f58, #b13d44);
  }

  &.green {
    background: linear-gradient(45deg, #00c091, #008d6a);
  }

  &.yellow {
    background: linear-gradient(45deg, #f1b100, #be8b00);
  }
}
</style>